<div>
    省份：
    <select id="selPro">

    </select>
</div>
<div>
    城市：
    <select id="selCity">

    </select>
</div>
<div>
    区县：
    <select id="selArea">

    </select>
</div>


<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>


    $(function () {

        $.ajax({
            url: 'api/pca.json', //发送网络请求地址
            type: 'get', //请求方式  GET(默认值)、POST
            cache: false,//不缓存此页面
            dataType: 'json',//预期服务器返回的数据类型
            success: function (data) { //请求成功后的回调函数
                //data 服务器响应的数据
                // console.table(data);
                $.each(data, function (index, p) {
                    $('<option>省</option>').text(p.name).val(p.name).appendTo($('#selPro'));
                });
                var pname = '';
                $('#selPro').click(function () {
                    pname = $(this).val();      //获取当前所选的省
                    //console.log(this);
                    $.each(data, function (index, p) {   // 传入下标和省
                        //console.log(data)
                        //console.log(index)
                        //console.log(pname)
                        if (p.name == pname) {      //所有省中 of 当前选的 省
                            $('#selCity option').remove();      //删除下级 市，县
                            $('#selArea option').remove();

                            $.each(p.city, function (index, c) {  //判断---遍历 市
                                //console.log(c)
                                //console.log(p.city)
                                $('<option>市</option>').text(c.name).val(c.name).appendTo($('#selCity'));
                            })
                        }
                    })
                })
                $('#selCity').click(function () {
                    var cityName = $(this).val();  //获取选取的 市

                    $.each(data, function (index1, p) {
                        //console.log(p)
                        if (p.name == pname) {   //所有省中 of 当前选的 省
                            $.each(p.city, function (index2, c) {  //c-市
                                if (cityName == c.name) {   //所有市中 of 当前选的 市
                                    console.log(c)
                                    $('#selArea option').remove();   //删除下级 县
                                    $.each(c.area, function (index3, a) {  //
                                        $('<option>县</option>').text(a).val(a).appendTo($('#selArea'));  //判断---遍历 县
                                    })
                                }
                            })
                        }
                    })
                })
            },
            error: function (xhr, textStatus, textStatus) { //请求失败时调用此函数
                alert('网络请求出错了');
            }
        });
    })


</script>